<template>
  <section class="content-container">
		<!--	ContentHeader, ContentBody	-->
		<div class="content-header">
			<slot name="title">
				<span>{{ title }}</span>
			</slot>
		</div>
		<div class="content-body">
			<slot>
				Body
			</slot>
		</div>
		<div class="content-footer">
			<slot name="footer"></slot>
		</div>
  </section>
</template>

<script>
export default {
  name: "MainContent",
	props: {
		title: String,
		buttonGroup: {
			type: [Object, Array],
			default: () => []
		}
	}
}
</script>

<style lang="scss" scoped>
  .content-container {
    background-color: #fff;
		height: 100%;
		box-shadow: 5px 5px 10px -7px rgba(0,0,0,0.65);
		-webkit-box-shadow: 5px 5px 10px -7px rgba(0,0,0,0.65);
		-moz-box-shadow: 5px 5px 10px -7px rgba(0,0,0,0.65);
		position: relative;
		border-radius: 4px;

		.content-header {
			height: 48px;
			line-height: 48px;
			border-bottom: 1px solid #ccc;
			padding: 0 16px;

			.title {
				font-size: 1.1em;
				font-weight: bold;
			}
		}

		.content-body {
			padding: 0 16px;
		}
  }
</style>
